<template>
    <div  style="width:1500px;margin-top: 20px;">
        <el-table
                stripe
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                             label="ID"
                             prop="id">
            </el-table-column>
            <el-table-column
                    label="URL"
                    prop="url">
            </el-table-column>
            <el-table-column
                    label="Path"
                    prop="path">
            </el-table-column>
            <el-table-column
                    label="组件"
                    prop="component">
            </el-table-column>
            <el-table-column
                    label="名字"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="图标"
                    prop="iconCls">
            </el-table-column>
            <el-table-column
                    label="上级目录"
                    prop="parentIdName">
            </el-table-column>
            <el-table-column
                    label="状态"
                    >
                <template slot-scope="scope">
                    <span v-if="scope.row.enabled">✔</span>
                    <span v-else>✘</span>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button slot="reference" >编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                           >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "SysMenu",
        data() {
            return {
                search: '',
                tableData: []

            }
        },
        mounted() {
            this.initMenus();
        },
        methods: {

            initMenus(){
                this.getRequest("/system/menu/menus").then(resp=>{
                    if(resp){
                        this.tableData = resp;

                    }
                })
            }
        }
    }
</script>

<style scoped>
    .menuAddClass{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20px;
    }
    .menuAddClass .el-input{
        width: 280px;
        margin-right: 6px;
    }
</style>